<template>
  <div>
    <div v-if="setForm.template_name==0 && slaveId" class="sensorBox" id="sensorOne">
      <div class="sensorHead" style="width:auto;white-space: nowrap;overflow:visible" ref="sensorHead">
        <span v-if="domains.length>1" class="inpu_4" :class="isAll?'isAll':''"
          style="width:0.4rem;height:0.4rem;line-height:0.4rem;border: 1px solid #ccc;transform:translateY(4px);color:#fff;cursor:pointer;font-size:0.3rem;padding-top:1px;padding-right:2px;"
          @click="chooseAll($event)"><span>√</span></span>
        <span class="inpu_4" style="width:0.8rem;margin-left:-0.15rem;">图标</span>
        <!-- <div class="inpu_4" style="width:4rem;"><span>名称</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorNameDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorNameUp"></i></span></div> -->
        <!-- <div class="inpu_4" style="width:2rem;"><span>地址</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorKeyDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorKeyUp"></i></span></div> -->
        <!-- <div class="inpu_4" style="width:2rem;"><span>数据属性</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorTypeDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorTypeUp"></i></span></div> -->
        <span class="inpu_4" style="width:3.5rem;">名称</span>
        <span class="inpu_4" v-if="isExam"
          style="width:1.6rem;color:deepskyblue;border-bottom:1px solid deepskyblue;">调试值</span>
        <span class="inpu_4" style="width:1.9rem;color:deepskyblue;">地址</span>
        <span class="inpu_4" style="width:3.5rem;color:deepskyblue;">键名</span>
        <span class="inpu_4" style="width:2.7rem;color:deepskyblue;">数值类型</span>
        <span class="inpu_4" style="width:1.15rem;color:deepskyblue;">倍数</span>
        <span class="inpu_4" style="width:1.15rem;color:deepskyblue;">偏置</span>
        <!-- <span class="inpu_4" style="width:1.6rem" v-show="more">小数位</span> -->
        <span class="inpu_4" style="width:1.3rem;color:deepskyblue;">小数位</span>
        <span class="inpu_4" style="width:1.15rem;color:deepskyblue;">阈值</span>
        <span class="inpu_4" v-if="appScene==2" style="width:1.8rem;color:deepskyblue;">低限</span>
        <!-- <span class="inpu_4" v-else style="width:1.8rem;">低限</span> -->
        <span class="inpu_4" v-if="appScene==2" style="width:1.8rem;color:deepskyblue;">高限</span>
        <!-- <span class="inpu_4" v-else style="width:1.8rem;">高限</span> -->
        <span v-if="appScene==2" class="inpu_4" style="width:1.8rem;color:deepskyblue;">标记</span>
        <span class="inpu_4" style="width:2.6rem;color:deepskyblue;">数据属性</span>
        <!-- <div class="inpu_4" style="width:1.8rem;" v-show="more"> -->
        <div class="inpu_4" style="width:1.8rem;">
          <span>单位</span>
          <el-tooltip placement="top" effect="light">
            <div slot="content" style="line-height:0.4rem;color:red;">
              注意事项:<br />为了体现专业化和减少占位长度以方便显示，尤其是手机端的显示，单位请使用数学写法，勿使用汉字！</div>
            <span class="sortIcon" style="color:red;">!</span>
          </el-tooltip>
        </div>
        <span class="inpu_4" style="width:2.5rem;">读写/显示</span>
        <!-- <span class="inpu_4" style="width:1.8rem;">存储</span> -->
        <div class="inpu_4" style="width:1.9rem;">
          <span>存储</span>
          <el-tooltip placement="top" effect="light">
            <div slot="content" style="line-height:0.4rem;color:red;">注意事项:<br />如果选择不存储，该数据点将没有历史数据和历史曲线，也不会出现在数据分析中！
            </div>
            <span class="sortIcon" style="color:red;">!</span>
          </el-tooltip>
        </div>
        <span class="inpu_4" style="width:3rem;">所属分组</span>
        <div class="inpu_4" style="width:1.2rem;">
          <span>排序</span>
          <el-tooltip placement="top" effect="light">
            <div slot="content" style="line-height:0.4rem;">
              支持的排序写法:<br />1.数字:如:0,1,2,3,...;<br />2.小写字母+数字:如:a1,a2,a3,...,b1,b2,b3,...</div>
            <span class="sortIcon">?</span>
          </el-tooltip>
        </div>
        <span class="inpu_4" style="width:2.5rem;">操作</span>
      </div>
      <!-- <div v-if="domains.length" style="width:auto;white-space: nowrap;overflow:auto;" class="oneBox" -->
      <div v-if="domains.length" style="width:auto;white-space: nowrap;" class="oneBox">
        <!-- <div v-for="(item,i) in domains" :key="i" class="oneSensor" @click="updateOne(i,$event,item)"> -->
        <div v-for="(item,i) in domains" :key="i" class="oneSensor">
          <span class="inpu_2" v-if="domains.length>1" :class="item.check?'isCheck':''"
            style="width:0.4rem;height:0.4rem;line-height:0.4rem;text-align:center;transform:translateY(5px);cursor:pointer;padding-top:1px;padding-right:2px;"
            @click="chooseOne(i)"><span style="color:#fff" v-if="item.check">√</span></span>
          <el-popover placement="top" width="210" style="z-index:9999;height:210px;line-height:70px;" trigger="manual"
            v-model="item.visible">
            <img v-for="(n) in 18" :key="n" :src="baseurl+'static/images/icon/icon'+n+'.png'" class="thumb"
              title="点击可更换" style="margin-left:0.27rem;margin-bottom:0.2rem;" :id="n" @click="chooseIcon(n,item)" />
            <el-button slot="reference" class="iconbtn" @click="getIndex(i)"><img v-if="item.icon" :id="i"
                :src="baseurl+item.icon" style="width:0.65rem;height:0.65rem;vertical-align: middle;" /></el-button>
          </el-popover>
          <!-- <img :src="baseurl+item.icon" style="width:0.65rem;height:0.65rem;margin-left:-0.15rem;margin-top:2px;" /> -->


          <span class="inpu_2 over" :class="item.is_virtual==1?'isVirtual':''"
            @click="updateOne(i,item,'sensor_name','名称')" title="点击修改"
            style="width:3.6rem;position:relative;margin-left:-0.2rem;cursor:pointer;">{{item.sensor_name}}</span>
          <span class="inpu_2 over" :class="item.show_type%2==0?'canWrite':'noWrite'"
            :title="item.show_type%2==0?'读写变量，点击写值':'只读变量'" v-if="isExam"
            :style="{'color':(item.value=='bad' || item.value=='error')?'red':'#111'}"
            @click="changeVal(item)">{{item.value}}</span>
          <span class="inpu_2" style="width:2rem;">{{item.data_key}}</span>
          <span class="inpu_2" style="width:3.5rem;cursor:pointer;"
            @click="updateOne(i,item,'value_key','键名')">{{item.value_key}}</span>
          <span class="inpu_2" style="width:2.6rem;">{{item.value_type | valueTypeFilter(item.data_key)}}</span>
          <span class="inpu_2" v-if="item.is_virtual==0" style="width:1.2rem;cursor:pointer;"
            @click="updateOne(i,item,'magnification','倍数')" title="点击修改">{{item.magnification}}</span>
          <span class="inpu_2" v-else style="width:1.2rem;">{{item.magnification}}</span>
          <span class="inpu_2" v-if="item.is_virtual==0" @click="updateOne(i,item,'value_offset','偏置')" title="点击修改"
            style="width:1.2rem;cursor:pointer;">{{item.value_offset}}</span>
          <span class="inpu_2" v-else style="width:1.2rem;">{{item.value_offset}}</span>
          <span class="inpu_2" @click="updateOne(i,item,'decimals','小数位')" title="点击修改"
            style="width:1.2rem;cursor:pointer;">{{item.decimals}}</span>
          <span class="inpu_2" v-if="item.is_virtual==0" @click="updateOne(i,item,'threshold','阈值')" title="点击修改"
            style="width:1.2rem;cursor:pointer;">{{item.threshold}}</span>
          <span class="inpu_2" v-else style="width:1.2rem;">{{item.threshold}}</span>

          <!-- <span v-if="appScene==2" class="inpu_2" style="width:1.8rem;">{{item.min_value}}</span>
					<span v-if="appScene==2" class="inpu_2" style="width:1.8rem;">{{item.max_value}}</span>
					<span v-if="appScene==2" class="inpu_2" style="width:1.8rem;">{{item.mark | waterMark}}</span> -->
          <span v-if="appScene==2" @click="updateOne(i,item,'min_value','底限')" title="点击修改" class="inpu_2"
            style="width:1.8rem;cursor:pointer;">{{item.min_value}}</span>
          <span v-if="appScene==2" @click="updateOne(i,item,'max_value','高限')" title="点击修改" class="inpu_2"
            style="width:1.8rem;cursor:pointer;">{{item.max_value}}</span>
          <span v-if="appScene==2" @click="updateOne(i,item,'mark','标记')" title="点击修改" class="inpu_2"
            style="width:1.8rem;cursor:pointer;">{{item.mark | waterMark}}</span>
          <span class="inpu_2" @click="updateOne(i,item,'report_type','数据属性')" title="点击修改"
            style="width:2.6rem;cursor:pointer;">{{item.report_type | reportTypeFilter}}</span>
          <!-- <span class="inpu_2" style="width:1.8rem" v-show="more">{{item.unit}}</span> -->
          <span class="inpu_2" @click="updateOne(i,item,'unit','单位')" title="点击修改"
            style="width:1.8rem;cursor:pointer;">{{item.unit}}</span>
          <span class="inpu_2" v-if="item.is_virtual==0" @click="updateOne(i,item,'show_type','读写/显示')" title="点击修改"
            style="width:2.6rem;cursor:pointer;">{{item.show_type | showTypeFilter}}</span>
          <span class="inpu_2" v-else style="width:2.6rem;">{{item.show_type | showTypeFilter}}</span>
          <!-- <span class="inpu_2" style="width:2rem;">{{item.read_write}}</span> -->
          <span class="inpu_2" @click="updateOne(i,item,'save_type','存储')" title="点击修改"
            style="width:1.8rem;cursor:pointer;">{{item.save_type}}</span>
          <!-- <span class="inpu_2 over" style="width:3.5rem" :title="item.ext_vars" v-show="more">{{item.ext_vars}}</span> -->
          <!-- <span class="inpu_2" style="width:1.2rem;" v-show="more">{{item.list_order}}</span> -->
          <span class="inpu_2" @click="updateOne(i,item,'sgroup_name','所属分组')" title="点击修改"
            style="width:3rem;cursor:pointer;">{{item.sgroup_name}}</span>
          <span class="inpu_2" @click="updateOne(i,item,'list_order','排序')" title="点击修改"
            style="width:1.2rem;cursor:pointer;">{{item.list_order}}</span>
          <el-button @click.prevent="sureDeleteSensor(item,$event)" type="danger" size="mini"
            style="vertical-align:top;margin:5px 0 0 0.1rem;padding:6px 10px;" class="btn_1600">删除</el-button>
          <el-button @click.prevent="showUpdate(i,$event,item.id)" type="primary" class="btn_1600" size="mini"
            style="vertical-align:top;margin:5px 0 0 -0.1rem;padding:6px 10px;">编辑</el-button>
          <!-- <el-button @click.prevent="copyMore(item,$event)" type="primary" size="mini"
						style="transform: translate(-0.1rem,-0.32rem);">复制</el-button> -->
        </div>

      </div>
      <div v-else class="oneSensor" style="font-size:0.3rem;color:#aaa;text-align:center;">
        <p>{{appScene==3?'该子设备暂无数据点':'该子设备暂无数据点，你可以现在添加，或在编辑子设备时使用数据点模板！'}}</p>
      </div>
    </div>
    <div v-if="setForm.template_name!=0 && slaveId" class="sensorBox" id="sensorTwo">
      <div class="sensorHead" style="width:100%;white-space: nowrap;" >
        <span class="inpu_4" style="width:0.8rem;height:0.8rem;margin-left: 0;">图标</span>
        <!-- <div class="inpu_4" style="width:4rem;"><span>名称</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorNameDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorNameUp"></i></span></div> -->
        <!-- <div class="inpu_4" style="width:2rem;"><span>地址</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorKeyDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorKeyUp"></i></span></div> -->
        <!-- <div class="inpu_4" style="width:2rem;"><span>数据属性</span><span class="sortIcon"><i class="el-icon-caret-bottom" @click="sortSensorTypeDown"></i></span><span class="sortIcon"><i class="el-icon-caret-top" @click="sortSensorTypeUp"></i></span></div> -->
        <span class="inpu_4" style="width:3.9rem;">名称</span>
        <span class="inpu_4" style="width:2rem;color:deepskyblue;">地址</span>
        <span class="inpu_4" style="width:3.5rem;color:deepskyblue;">键名</span>
        <span class="inpu_4" style="width:2.6rem;color:deepskyblue;">数值类型</span>
        <span class="inpu_4" style="width:1.1rem;color:deepskyblue;">倍数</span>
        <span class="inpu_4" style="width:1.2rem;color:deepskyblue;">偏置</span>
        <span class="inpu_4" style="width:1.2rem;color:deepskyblue;">小数位</span>
        <span class="inpu_4" style="width:1.2rem;color:deepskyblue;">阈值</span>
        <span class="inpu_4" v-if="appScene==2" style="width:1.8rem;color:deepskyblue;">低限</span>
        <!-- <span class="inpu_4" v-else style="width:1.8rem;">低限</span> -->
        <span class="inpu_4" v-if="appScene==2" style="width:1.8rem;color:deepskyblue;">高限</span>
        <span v-if="appScene==2" class="inpu_4" style="width:1.8rem;color:deepskyblue;">标记</span>
        <span class="inpu_4" style="width:2.8rem;color:deepskyblue;">数据属性</span>
        <span class="inpu_4" style="width:2rem">单位</span>
        <span class="inpu_4" style="width:2.6rem;">读写/显示</span>
        <!-- <span class="inpu_4" style="width:2rem;">读写属性</span> -->
        <span class="inpu_4" style="width:1.7rem;">存储</span>
        <span class="inpu_4" style="width:1.3rem;">排序</span>
        <!-- <span class="inpu_4" style="width:2.8rem">操作</span> -->
      </div>
      <div style="width:100%;white-space: nowrap;overflow:visible;" class="twoBox" ref="twoBox">
        <div v-for="(item,i) in domains2" :key="i" class="oneSensor">
          <img v-if="item.icon" :src="baseurl+item.icon"
            style="width:0.65rem;height:0.65rem;vertical-align:top;margin-top:1px;" />
          <span class="inpu_2 over" style="width:4rem;">{{item.sensor_name}}</span>
          <span class="inpu_2" style="width:2rem;">{{item.data_key}}</span>
          <span class="inpu_2" style="width:3.5rem;">{{item.value_key}}</span>
          <span class="inpu_2" style="width:2.6rem;">{{item.value_type | valueTypeFilter(item.data_key)}}</span>
          <span class="inpu_2" style="width:1.2rem;">{{item.magnification}}</span>
          <span class="inpu_2" style="width:1.2rem;">{{item.value_offset}}</span>
          <span class="inpu_2" style="width:1.2rem">{{item.decimals}}</span>
          <span class="inpu_2" style="width:1.2rem;">{{item.threshold}}</span>
          <span v-if="appScene==2" class="inpu_2" style="width:1.8rem;">{{item.min_value}}</span>
          <span v-if="appScene==2" class="inpu_2" style="width:1.8rem;">{{item.max_value}}</span>
          <span v-if="appScene==2" class="inpu_2" style="width:1.8rem;">{{item.mark | waterMark}}</span>
          <span class="inpu_2" style="width:2.8rem">{{item.report_type | reportTypeFilter}}</span>
          <span class="inpu_2" style="width:2rem">{{item.unit}}</span>
          <span class="inpu_2" style="width:2.6rem;">{{item.show_type | showTypeFilter}}</span>
          <!-- <span class="inpu_2" style="width:2rem;">{{item.read_write}}</span> -->
          <span class="inpu_2" style="width:1.8rem;">{{item.save_type}}</span>
          <!-- <span class="inpu_2" style="width:3.5rem" v-show="more_2">{{item.ext_vars}}</span> -->

          <span class="inpu_2" style="width:1.2rem;">{{item.list_order}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SensorSetList',
    data() {
      return {
        isChlid: '子组件'
      }
    },
    props: ['appScene', 'setForm', 'slaveId', 'domains', 'domains2', 'isExam', 'isAll', 'baseurl', 'chooseAll',
      'chooseOne', 'changeVal', 'sureDeleteSensor', 'showUpdate', 'updateOne', 'getIndex', 'chooseIcon'
    ],
    //props: ['setForm', 'slaveId', 'domains','domains2','isExam','isAll','baseurl','chooseAll','chooseOne','changeVal','sureDeleteSensor','showUpdate']

    //以下是测试父组件操控子组件的代码
    //       mounted(){
    // 	this.$nextTick(function(){
    // 		this.$on('testChild',this.testChild);
    // 	})
    // },
    // methods:{
    // 	testChild() {
    // 		this.isChlid = "我就是子组件";
    // 		console.log(this.isChlid);
    // 	}
    // }
    //以下是测试子组件操控父组件的代码
    // methods:{
    // 	childMethod() {
    // 		this.$emit('fatherMethod');
    // 	}
    // }
  }
</script>
<style lang="">
  /* 数据点相关 */
  @media all and (max-width:2560px) {
      #sensorOne {
          width: 100% !important;
      }
      #sensorTwo {
          width: 100% !important;
      }

  }

  @media all and (max-width:1920px) {
    #sensorOne {
      width: auto !important;
    }

    #sensorTwo {
      width: auto !important;
    }
  }

  @media all and (max-width:1600px) {
    #sensorOne {
      width: 100% !important;
    }

    .btn_1600 {
      height: 0.5rem !important;
      line-height: 0.5rem !important;
      padding: 0 6px !important;
      /* transform:translateY(-0.22rem)!important; */
    }

  }

  .oneBox,
  .twoBox {
    height:calc(100vh - 3.2rem);
    width:auto;
    white-space: nowrap;
    overflow: auto;
  }

  .inpu {
    display: inline-block;
    width: 5.5rem;
    font-size: 0.25rem;
  }

  .inpu_2,
  .inpu_4 {
    display: inline-block;
    /* 加这个相对定位是为了快速精准识别点击事件，鼠标快速变手形，
		 否则只有鼠标完全在框内才会触发*/
    position: relative;
    width: 2.4rem;
    font-size: 0.25rem;
    vertical-align: top;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 0.6rem;
    margin-left: -0.2rem;
    line-height: 0.6rem;
    text-align: center;
    margin-top: 3px;
  }

  .inpu_4 {
    width: 4rem;
    border: 0;
    margin-top: 0.1rem;
    font-size: 0.35rem;
  }

  .canWrite {
    width: 1.6rem !important;
    position: relative;
    border: 1px solid green;
    cursor: pointer;
    color: green;
  }

  .noWrite {
    width: 1.6rem !important;
    position: relative;
    border: 1px solid deepskyblue;
  }

  .badValue {
    color: red !important;
    border: 1px solid red;
  }

  .sensorBox {
    width: auto;
    height: auto;
    /* overflow: auto; */
    padding: 0;
    text-align: left;
    margin-top: 0.3rem;
    /* margin-top: 0; */
    /* border-top: 1px solid #111; */
    /* padding-left: 0.6rem; */
    /* border:1px solid red; */
  }

  .oneSensor,
  .sensorHead {
    height: 0.7rem;
    line-height: 0.7rem;
    /* border:1px solid red; */
    padding-left: 0.2rem;
  }

  .oneSensor {
    height: 0.7rem;
    line-height: 0.7rem;
    /* border:1px solid red; */
  }

  .oneSensor:hover {
    background-color: #f0f0f0;
  }

  .sensorHead {
    width: auto;
    border-bottom: 1px solid #bbb;
    margin: 0.1rem 0;
    overflow: hidden;
  }

  .thumb {
    width: 0.8rem;
    height: 0.8rem;
    cursor: pointer;
    vertical-align: middle;
  }

  .iconbtn {
    width: 0.65rem;
    height: 0.65rem;
    line-height: 0.65rem !important;
    vertical-align: top !important;
    padding: 0 !important;
    /* border:1px solid blue; */
    border: none !important;
    margin-left: -0.1rem !important;
    margin-top: 0px !important;
    background-color: transparent !important;
    /* margin-right: 0.1rem; */
    /* margin-top:-0.2rem; */
  }

  .btnBox {
    width: 100%;
    /* padding-left:0.6rem; */
    text-align: left;
    height: 1rem;
    line-height: 1rem;
    /* border:1px solid red; */
    margin-top: 0;
  }

  .isTrigger {
    position: absolute;
    right: 1px;
    top: 1px;
    color: deepskyblue;
    font-size: 0.2rem;
  }

  .isAll {
    border: 1px solid deepskyblue !important;
    background-color: deepskyblue;
    color: #fff !important;
  }

  .isCheck {
    border: 1px solid #409eff !important;
    background-color: #409eff;
  }

  .isVirtual {
    background-color: #ccc;
    /* color:#fff; */
  }
</style>
